<template>
  <div class="vendorConsumables">
    <div class="title">
      {{ $t("scheduleManager.vendorConsumables.title") }}<!--厂商评鉴（零件耗材） 零件、工程耗材、二手设备协力厂商评鉴表-->
    </div>
    <div class="yt-box-flex">
      <div class="flex-grid">
        <div class="flex-col flex-bg"> {{ $t("scheduleManager.vendorEngineering.projectName") }}</div>
        <div class="flex-col head-colspan-2-4">
          {{ appraiseData.projectName }}
        </div>
        <div class="flex-col flex-bg"> {{ $t("scheduleManager.vendorEngineering.projectNo") }}</div>
        <div class="flex-col colspan-7-2">
          {{ appraiseData.projectNo }}
        </div>


        <div class="flex-col flex-bg"> {{ $t("scheduleManager.vendorConsumables.vendorName") }}</div>
        <div class="flex-col colspan-2-7">
          {{ appraiseData.vendorName }}
        </div>
        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorConsumables.vendorNo") }}</div>
        <div class="flex-col colspan-2-3">{{ appraiseData.vendorNo }}</div>
        <div class="flex-col flex-bg colspan-5-2">{{ $t("scheduleManager.vendorConsumables.dealCasesTotal") }}</div>
        <div class="flex-col colspan-7-2" style="padding:2px">
          <el-input v-model="appraiseData.dealCasesTotal" disabled class="filter-item"></el-input>
        </div>
        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorConsumables.vendorItem") }}</div>
        <div class="flex-col head-colspan-2-5" v-html="vendorItem">
        </div>
        <div class="flex-col flex-bg">評鑒填寫日期</div>
        <div class="flex-col colspan-8-1">
          <el-date-picker style="width:54%;" v-model="appraiseData.fillDate" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :placeholder="$t('scheduleManager.progressList.selectDatePlaceHolder')"></el-date-picker> <!--选择日期-->
        </div>
        <!--<div class="flex-col flex-bg"></div>-->
        <div class="flex-col flex-bg colspan-2-2"></div>
        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorConsumables.good") }}</div>
        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorConsumables.better") }}</div>
        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorConsumables.medium") }}</div>
        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorConsumables.fair") }}</div>
        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorConsumables.inferior") }}</div>
        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorConsumables.uncheck") }}</div>
        <div class="flex-col flex-bg coldiv-5-9">{{ $t("scheduleManager.vendorConsumables.selectionItems") }}</div>
        <div class="flex-col flex-bg tl colspan-2-2" style="text-align: left;">{{ $t("scheduleManager.vendorConsumables.specifications")}}</div>
        <div class="flex-col">
          <el-radio @dblclick.native="storageDetail(0)" v-model="appraiseItem[0].appraiseItemScore" label="10">{{ $t("scheduleManager.vendorConsumables.tenScore") }}</el-radio>
        </div>
        <div class="flex-col">
          <el-radio @dblclick.native="storageDetail(0)" v-model="appraiseItem[0].appraiseItemScore" label="7">{{ $t("scheduleManager.vendorConsumables.sevenScore") }}</el-radio>
        </div>
        <div class="flex-col">
          <el-radio @dblclick.native="storageDetail(0)" v-model="appraiseItem[0].appraiseItemScore" label="5">{{ $t("scheduleManager.vendorConsumables.fiveScore") }}</el-radio>
        </div>
        <div class="flex-col">
          <el-radio @dblclick.native="storageDetail(0)" v-model="appraiseItem[0].appraiseItemScore" label="3">{{ $t("scheduleManager.vendorConsumables.threeScore") }}</el-radio>
        </div>
        <div class="flex-col">
          <el-radio @dblclick.native="storageDetail(0)" v-model="appraiseItem[0].appraiseItemScore" label="0">{{ $t("scheduleManager.vendorConsumables.zeroScore") }}</el-radio>
        </div>
        <div class="flex-col">
          <el-input v-model="appraiseItem[0].appraiseItemInapplicabilityExplain" :placeholder="$t('scheduleManager.vendorConsumables.placeholder.explain')" clearable class="filter-item"></el-input>
        </div>
        <div class="flex-col tl flex-bg colspan-2-2">{{ $t("scheduleManager.vendorConsumables.coincidenceDegree") }}</div>
        <div class="flex-col">
          <el-radio @dblclick.native="storageDetail(1)" v-model="appraiseItem[1].appraiseItemScore" label="10">{{ $t("scheduleManager.vendorConsumables.tenScore") }}</el-radio>
        </div>
        <div class="flex-col">
          <el-radio @dblclick.native="storageDetail(1)" v-model="appraiseItem[1].appraiseItemScore" label="7">{{ $t("scheduleManager.vendorConsumables.sevenScore") }}</el-radio>
        </div>
        <div class="flex-col">
          <el-radio @dblclick.native="storageDetail(1)" v-model="appraiseItem[1].appraiseItemScore" label="5">{{ $t("scheduleManager.vendorConsumables.fiveScore") }}</el-radio>
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(1)"
            v-model="appraiseItem[1].appraiseItemScore"
            label="3"
          >{{ $t("scheduleManager.vendorConsumables.threeScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(1)"
            v-model="appraiseItem[1].appraiseItemScore"
            label="0"
          >{{ $t("scheduleManager.vendorConsumables.zeroScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-input
            v-model="appraiseItem[1].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorConsumables.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>
        <div class="flex-col tl flex-bg colspan-2-2">{{ $t("scheduleManager.vendorConsumables.relatedManuals") }}</div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(2)"
            v-model="appraiseItem[2].appraiseItemScore"
            label="10"
          >{{ $t("scheduleManager.vendorConsumables.tenScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(2)"
            v-model="appraiseItem[2].appraiseItemScore"
            label="7"
          >{{ $t("scheduleManager.vendorConsumables.sevenScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(2)"
            v-model="appraiseItem[2].appraiseItemScore"
            label="5"
          >{{ $t("scheduleManager.vendorConsumables.fiveScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(2)"
            v-model="appraiseItem[2].appraiseItemScore"
            label="3"
          >{{ $t("scheduleManager.vendorConsumables.threeScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(2)"
            v-model="appraiseItem[2].appraiseItemScore"
            label="0"
          >{{ $t("scheduleManager.vendorConsumables.threeScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-input
            v-model="appraiseItem[2].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorConsumables.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>
        <div class="flex-col tl flex-bg colspan-2-2">
          {{ $t("scheduleManager.vendorConsumables.relatedTechnology") }}
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(3)"
            v-model="appraiseItem[3].appraiseItemScore"
            label="10"
          > {{ $t("scheduleManager.vendorConsumables.tenScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(3)"
            v-model="appraiseItem[3].appraiseItemScore"
            label="7"
          > {{ $t("scheduleManager.vendorConsumables.sevenScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(3)"
            v-model="appraiseItem[3].appraiseItemScore"
            label="5"
          > {{ $t("scheduleManager.vendorConsumables.fiveScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(3)"
            v-model="appraiseItem[3].appraiseItemScore"
            label="3"
          >{{ $t("scheduleManager.vendorConsumables.threeScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(3)"
            v-model="appraiseItem[3].appraiseItemScore"
            label="0"
          >{{ $t("scheduleManager.vendorConsumables.zeroScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-input
            v-model="appraiseItem[3].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorConsumables.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>
        <div class="flex-col tl flex-bg colspan-2-2">
          {{ $t("scheduleManager.vendorConsumables.maintenance") }}
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(4)"
            v-model="appraiseItem[4].appraiseItemScore"
            label="10"
          >{{ $t("scheduleManager.vendorConsumables.tenScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(4)"
            v-model="appraiseItem[4].appraiseItemScore"
            label="7"
          >{{ $t("scheduleManager.vendorConsumables.sevenScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(4)"
            v-model="appraiseItem[4].appraiseItemScore"
            label="5"
          >{{ $t("scheduleManager.vendorConsumables.fiveScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(4)"
            v-model="appraiseItem[4].appraiseItemScore"
            label="3"
          >{{ $t("scheduleManager.vendorConsumables.threeScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(4)"
            v-model="appraiseItem[4].appraiseItemScore"
            label="0"
          >{{ $t("scheduleManager.vendorConsumables.zeroScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-input
            v-model="appraiseItem[4].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorConsumables.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>
        <div class="flex-col tl flex-bg colspan-2-2">
          {{ $t("scheduleManager.vendorConsumables.isFollow") }}
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(5)"
            v-model="appraiseItem[5].appraiseItemScore"
            label="10"
          > {{ $t("scheduleManager.vendorConsumables.tenScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(5)"
            v-model="appraiseItem[5].appraiseItemScore"
            label="7"
          > {{ $t("scheduleManager.vendorConsumables.sevenScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(5)"
            v-model="appraiseItem[5].appraiseItemScore"
            label="5"
          > {{ $t("scheduleManager.vendorConsumables.fiveScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(5)"
            v-model="appraiseItem[5].appraiseItemScore"
            label="3"
          >{{ $t("scheduleManager.vendorConsumables.threeScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(5)"
            v-model="appraiseItem[5].appraiseItemScore"
            label="0"
          >{{ $t("scheduleManager.vendorConsumables.zeroScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-input
            v-model="appraiseItem[5].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorConsumables.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>
        <div class="flex-col tl flex-bg colspan-2-2">{{ $t("scheduleManager.vendorConsumables.serviceAttitude") }}</div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(6)"
            v-model="appraiseItem[6].appraiseItemScore"
            label="10"
          >{{ $t("scheduleManager.vendorConsumables.tenScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(6)"
            v-model="appraiseItem[6].appraiseItemScore"
            label="7"
          >{{ $t("scheduleManager.vendorConsumables.sevenScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(6)"
            v-model="appraiseItem[6].appraiseItemScore"
            label="5"
          >{{ $t("scheduleManager.vendorConsumables.fiveScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(6)"
            v-model="appraiseItem[6].appraiseItemScore"
            label="3"
          >{{ $t("scheduleManager.vendorConsumables.threeScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(6)"
            v-model="appraiseItem[6].appraiseItemScore"
            label="0"
          >{{ $t("scheduleManager.vendorConsumables.zeroScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-input
            v-model="appraiseItem[6].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorConsumables.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>
        <div class="flex-col flex-bg colspan-2-2">{{ $t("scheduleManager.vendorConsumables.totalScore") }}</div>
        <div class="flex-col colspan-3-5 center">
          {{ appraiseData.totalScore }}{{ $t("scheduleManager.vendorConsumables.score") }}
        </div>
        <div class="flex-col"></div>
        <div class="flex-col flex-bg colspan-1-8">
          工務評鑒結果：
          <div style="display: inline-block;">
            <el-radio-group v-model="checkList">
              <el-radio label="checkListA" disabled>良好（47分以上）</el-radio>
              <el-radio label="checkListB" disabled>中等（23-47分）</el-radio>
              <el-radio label="checkListC" disabled>劣（23分以下）</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="flex-col flex-bg coldiv-15-4">採購評鑒項目</div>
        <div class="flex-col flex-bg tl colspan-2-2" style="text-align: left;">{{ $t("scheduleManager.vendorConsumables.tradingTerms") + paymentTypeList }}</div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(7)"
            v-model="appraiseItem[7].appraiseItemScore"
            label="10"
          >{{ $t("scheduleManager.vendorConsumables.tenScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(7)"
            v-model="appraiseItem[7].appraiseItemScore"
            label="7"
          >{{ $t("scheduleManager.vendorConsumables.sevenScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(7)"
            v-model="appraiseItem[7].appraiseItemScore"
            label="5"
          >{{ $t("scheduleManager.vendorConsumables.fiveScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(7)"
            v-model="appraiseItem[7].appraiseItemScore"
            label="3"
          >{{ $t("scheduleManager.vendorConsumables.threeScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(7)"
            v-model="appraiseItem[7].appraiseItemScore"
            label="0"
          >{{ $t("scheduleManager.vendorConsumables.zeroScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-input
            v-model="appraiseItem[7].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorConsumables.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>
        <div class="flex-col flex-bg tl colspan-2-2" style="text-align: left;">9、長期配合意願與質量改進能力</div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(8)"
            v-model="appraiseItem[8].appraiseItemScore"
            label="10"
          >{{ $t("scheduleManager.vendorConsumables.tenScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(8)"
            v-model="appraiseItem[8].appraiseItemScore"
            label="7"
          >{{ $t("scheduleManager.vendorConsumables.sevenScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(8)"
            v-model="appraiseItem[8].appraiseItemScore"
            label="5"
          >{{ $t("scheduleManager.vendorConsumables.fiveScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(8)"
            v-model="appraiseItem[8].appraiseItemScore"
            label="3"
          >{{ $t("scheduleManager.vendorConsumables.threeScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(8)"
            v-model="appraiseItem[8].appraiseItemScore"
            label="0"
          >{{ $t("scheduleManager.vendorConsumables.zeroScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-input
            v-model="appraiseItem[8].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorConsumables.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>
        <div class="flex-col flex-bg tl colspan-2-2" style="text-align: left;">10、資訊專業度與透明度</div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(9)"
            v-model="appraiseItem[9].appraiseItemScore"
            label="10"
          >{{ $t("scheduleManager.vendorConsumables.tenScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(9)"
            v-model="appraiseItem[9].appraiseItemScore"
            label="7"
          >{{ $t("scheduleManager.vendorConsumables.sevenScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(9)"
            v-model="appraiseItem[9].appraiseItemScore"
            label="5"
          >{{ $t("scheduleManager.vendorConsumables.fiveScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(9)"
            v-model="appraiseItem[9].appraiseItemScore"
            label="3"
          >{{ $t("scheduleManager.vendorConsumables.threeScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-radio
            @dblclick.native="storageDetail(9)"
            v-model="appraiseItem[9].appraiseItemScore"
            label="0"
          >{{ $t("scheduleManager.vendorConsumables.zeroScore") }}
          </el-radio
          >
        </div>
        <div class="flex-col">
          <el-input
            v-model="appraiseItem[9].appraiseItemInapplicabilityExplain"
            :placeholder="$t('scheduleManager.vendorConsumables.placeholder.explain')"
            clearable
            class="filter-item"
          ></el-input>
        </div>
        <div class="flex-col flex-bg colspan-2-2">{{ $t("scheduleManager.vendorConsumables.totalScore") }}</div>
        <div class="flex-col colspan-3-5 center"> <!--purchaseTotalScore-->
          {{ appraiseData.purchaseTotalScore }}{{ $t("scheduleManager.vendorConsumables.score") }}
        </div>
        <div class="flex-col"></div>
        <div class="flex-col flex-bg colspan-1-8">
          採購評鑒結果：
          <div style="display: inline-block;">
            <el-radio-group v-model="checkPurchaseList">
              <el-radio label="checkListA" disabled>良好（21分以上）</el-radio>
              <el-radio label="checkListB" disabled>中等（9-21分）</el-radio>
              <el-radio label="checkListC" disabled>劣（9分以下）</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="flex-col flex-bg colspan-1-5">合併分數</div>
        <div class="flex-col colspan-6-3 center"> <!--purchaseTotalScore-->
          {{ appraiseData.totalScore + appraiseData.purchaseTotalScore }}{{ $t("scheduleManager.vendorConsumables.score") }}
        </div>
        <div class="flex-col flex-bg colspan-1-8" style="justify-content: left;">
          {{ $t("scheduleManager.vendorConsumables.remarksOne") }}
        </div>
        <div class="flex-col flex-bg colspan-1-8" style="justify-content: left;">
          {{ $t("scheduleManager.vendorConsumables.remarksTwo") }}
        </div>

        <div class="flex-col flex-bg"> {{ $t("scheduleManager.vendorConsumables.opinion") }}</div>
        <div class="flex-col colspan-2-7">
          <el-input
            v-model="appraiseData.opinion"
            clearable
            class="filter-item"
          ></el-input>
        </div>
        <div class="flex-col flex-bg colspan-1-8">
          {{ $t("scheduleManager.vendorConsumables.totalResults") }}：
          <div style="display: inline-block;">
            <el-radio-group v-model="checkAllList">
              <el-radio label="checkListA" disabled>{{ $t("scheduleManager.vendorConsumables.totalGood") }}</el-radio>
              <el-radio label="checkListB" disabled>{{ $t("scheduleManager.vendorConsumables.totalMedium") }}</el-radio>
              <el-radio label="checkListC" disabled>{{ $t("scheduleManager.vendorConsumables.totalInferior") }}</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="flex-col flex-bg colspan-1-8">
          {{ $t("scheduleManager.vendorConsumables.determinePropose") }}：
          <div style="display: inline-block;">
            <el-radio-group v-model="appraiseData.proposal">
              <el-radio label="A">{{ $t("scheduleManager.vendorConsumables.first") }}</el-radio>
              <el-radio label="B">{{ $t("scheduleManager.vendorConsumables.continue") }}</el-radio>
              <el-radio label="C">{{ $t("scheduleManager.vendorConsumables.noAdoption") }}</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorConsumables.selectionUnit") }}</div>
        <div class="flex-col colspan-2-7">
          {{ bu }}
        </div>

        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorConsumables.approveName") }}<br/> BU Head</div>
        <div class="flex-col" style="padding:12px 2px;">
          <popover-select selectType="user" valueObjName="ename" @setValue="setApprove" v-model="appraiseData.approveName" :placeholder="$t('scheduleManager.vendorConsumables.placeholder.userNo')"></popover-select>
        </div>
        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorConsumables.examine") }}<br/> Line Manager</div>
        <div class="flex-col flex-bg" style="padding:12px 2px;">
          <popover-select selectType="user" valueObjName="ename" @setValue="setExamine" v-model="appraiseData.examineName" :placeholder="$t('scheduleManager.vendorConsumables.placeholder.userNo')"></popover-select>
        </div>
        <div class="flex-col flex-bg">{{ $t("scheduleManager.vendorConsumables.selectionPerson") }}</div>
        <div class="flex-col flex-bg">
          <popover-select selectType="user" valueObjName="ename" @setValue="setAppreciator" v-model="appraiseData.appreciatorName" :placeholder="$t('scheduleManager.vendorConsumables.placeholder.userNo')"></popover-select>
        </div>
        <div class="flex-col flex-bg">評鑑採購</div>
        <div class="flex-col flex-bg">
          <popover-select selectType="user" valueObjName="ename" @setValue="setPurchaser" v-model="appraiseData.purchaserName" :placeholder="$t('scheduleManager.vendorConsumables.placeholder.userNo')"></popover-select>
        </div>
      </div>
    </div>
    <div class="yt-data-btn bt30">
      <div class="yt-btn yt-btn-ys" @click="save()"> {{ $t("button.submit") }}</div>
      <div class="yt-btn yt-ml8" @click="getBack">{{ $t("button.cancel") }}</div>
    </div>
  </div>
</template>

<script>
  import {
    getProjectNumByProjectVendorId,
    queryConsumableAppraise,
    saveConsumableAppraise
  } from '@/api/scheduleManager/projectProgress';
  import { getUserInfoByName } from '@/api/dict/dictValue/index';
  import popoverSelect from '@/components/popover-select/index.vue';

  export default {
    name: 'vendorConsumables',
    components: {
      popoverSelect
    },
    data() {
      return {
        optionsProject: [],
        fromData: {
          applyProjectTravelling: {
            id: '', // id
            ename: '', // 申请人职称
            username: '' // 费用使用人ID
          },
          detailList: []
        },
        paymentTypeList: '',
        dealCasesTotal: '',
        appraiseData: {
          proposal: 'A',
          totalScore: 0,
          purchaseTotalScore: 0,
          allTotalScore: 0
        },
        vendorItem: '',
        bu: '',
        appreciatorName: '',
        userList: [],
        appraiseItem: [
          { appraiseItemScore: -1, appraiseItemInapplicabilityExplain: '' },
          { appraiseItemScore: -1, appraiseItemInapplicabilityExplain: '' },
          { appraiseItemScore: -1, appraiseItemInapplicabilityExplain: '' },
          { appraiseItemScore: -1, appraiseItemInapplicabilityExplain: '' },
          { appraiseItemScore: -1, appraiseItemInapplicabilityExplain: '' },
          { appraiseItemScore: -1, appraiseItemInapplicabilityExplain: '' },
          { appraiseItemScore: -1, appraiseItemInapplicabilityExplain: '' },
          { appraiseItemScore: -1, appraiseItemInapplicabilityExplain: '' },
          { appraiseItemScore: -1, appraiseItemInapplicabilityExplain: '' },
          { appraiseItemScore: -1, appraiseItemInapplicabilityExplain: '' }
        ],
        checkList: '',
        checkPurchaseList: '',
        checkAllList: ''
      };
    },
    mounted() {
      this.initData();
    },
    methods: {
      timeDefault() {
        const date = new Date();
        const s1 = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() + 1);
        return s1;
      },
      async initData() {
        await this.getData()
        this.getDeal()
      },
      // 选择人员查询条件
      queryList(queryString, clear) {
        if (clear) {
          this.fromData.applyProjectTravelling.id = ''
          this.fromData.applyProjectTravelling.ename = ''
          this.fromData.applyProjectTravelling.username = ''
        }
        const obj = {
          projectNo: queryString,
          limit: '5'
        }
        getUserInfoByName(obj).then(res => {
          this.optionsProject = res.data.rows
        });
      },
      storageDetail(item) {
        this.appraiseItem[item].appraiseItemScore = -1;
      },
      setApprove(item) {
        console.log(JSON.stringify(item))
        this.appraiseData.approve = item.id;
      },
      setExamine(item) {
        this.appraiseData.examine = item.id;
      },
      setAppreciator(item) {
        this.appraiseData.appreciator = item.id;
      },
      // 采購責任人
      setPurchaser(item) {
        this.appraiseData.purchaser = item.id;
      },
      getUserList(queryString, cb) {
        getUserInfoByName({ username: queryString }).then(res => {
          const userList = res.data.rows;
          for (let i = 0; i < userList.length; i++) {
            userList[i].value = userList[i].ename;
          }
          cb(userList);
        });
      },
      getBack() {
        this.$router.go(-1);
      },
      getData() {
        return new Promise(resolve => {
          const a = {
            projectVendorId: this.$route.query.queryId
          };
          // const progressId = {
          //   progressId: this.$route.query.progressId
          // };
          if (this.$route.query.queryId) {
            queryConsumableAppraise(a).then(res => {
              if (res.status === 200) {
                if (res.data.payConditionVendor) {
                  if (this.$store.getters.allDic.paymentType[res.data.payConditionVendor]) {
                    this.paymentTypeList = this.$store.getters.allDic.paymentType[res.data.payConditionVendor].label
                  } else {
                    this.paymentTypeList = res.data.payConditionVendor
                  }
                } else {
                  this.bu = this.$store.getters.info.bu;
                  this.appreciatorName =
            this.$store.getters.info.ename || this.$store.getters.info.name;
                  this.paymentTypeList = '_____'
                }
                if (res.data.vendorConsumableAppraise) {
                  if (!res.data.vendorConsumableAppraise.fillDate) {
                    this.$set(res.data.vendorConsumableAppraise, 'fillDate', new Date())
                  }
                  this.appraiseData = res.data.vendorConsumableAppraise;
                  // 评鉴人
                  if (res.data.vendorConsumableAppraise.appreciatorName) {
                    this.appreciatorName = res.data.vendorConsumableAppraise.appreciatorName
                  } else {
                    this.bu = this.$store.getters.info.bu;
                    if (res.data.engineer) {
                      this.$set(this.appraiseData, 'appreciator', res.data.engineer.id || '')
                      this.$set(this.appraiseData, 'appreciatorName', res.data.engineer.ename || '')
                    } else {
                      this.$set(this.appraiseData, 'appreciator', '')
                      this.$set(this.appraiseData, 'appreciatorName', '')
                    }
                  }
                  if (res.data.vendorConsumableAppraise.appreciatorBu) {
                    this.bu = res.data.vendorConsumableAppraise.appreciatorBu
                  } else {
                    this.appreciatorName =
                      this.$store.getters.info.ename || this.$store.getters.info.name;
                  }

                  // 采购评鉴人
                  if (!this.appraiseData.purchaserName) {
                    if (res.data.purchaser) {
                      this.$set(this.appraiseData, 'purchaser', res.data.purchaser.id || '')
                      this.$set(this.appraiseData, 'purchaserName', res.data.purchaser.ename || '')
                    } else {
                      this.$set(this.appraiseData, 'purchaser', '')
                      this.$set(this.appraiseData, 'purchaserName', '')
                    }
                  }
                  // 获得采购项目
                  this.appraiseData.vendorItem.forEach((itme, index) => {
                    this.vendorItem += itme
                    this.vendorItem += index < this.appraiseData.vendorItem.length - 1 ? '</br>' : ''
                  })
                }
                if (res.data.list) {
                  res.data.list.forEach(x => {
                    if (x.appraiseItemScore !== -1) {
                      this.appraiseItem[x.appraiseItemSeq].appraiseItemScore = String(
                        x.appraiseItemScore
                      );
                    }
                    this.appraiseItem[
                      x.appraiseItemSeq
                    ].appraiseItemInapplicabilityExplain =
                      x.appraiseItemInapplicabilityExplain;
                    this.appraiseItem[x.appraiseItemSeq].id = x.id;
                  });
                }
                // console.log('buAudit', res.data.buAudit)
                // console.log('bgAudit', res.data.bgAudit)
                if (!this.appraiseData.approve) {
                  if (res.data.bgAudit) {
                    this.$set(this.appraiseData, 'approve', res.data.bgAudit.id || '')
                    this.$set(this.appraiseData, 'approveName', res.data.bgAudit.ename || '')
                  } else {
                    this.$set(this.appraiseData, 'approve', '')
                    this.$set(this.appraiseData, 'approveName', '')
                  }
                }
                if (!this.appraiseData.examine) {
                  if (res.data.buAudit) {
                    this.$set(this.appraiseData, 'examine', res.data.buAudit.id || '')
                    this.$set(this.appraiseData, 'examineName', res.data.buAudit.ename || '')
                  } else {
                    this.$set(this.appraiseData, 'examine', '')
                    this.$set(this.appraiseData, 'examineName', '')
                  }
                }
                resolve();
              } else {
                this.$message.error(res.message);
              }
            });
          } else {
            this.bu = this.$store.getters.info.bu;
            this.appreciatorName =
            this.$store.getters.info.ename || this.$store.getters.info.name;
          }
        })
      },
      getDeal() {
        if (this.$route.query.vendorNo) {
          const b = {
            projectVendorId: this.$route.query.vendorNo
          };
          getProjectNumByProjectVendorId(b).then(res => {
            this.$set(this.appraiseData, 'dealCasesTotal')
            this.appraiseData.dealCasesTotal = res.data
            this.dealCasesTotal = res.data
          });
        }
      },
      save() {
        // 现在是两个人分别评分了 不能在做这个验证了
        /* let flag = false;
        this.appraiseItem.forEach(item => {
          if (item.appraiseItemScore === -1 || item.appraiseItemScore === '') {
            if (item.appraiseItemInapplicabilityExplain === '') {
              this.$message.error(this.$t('scheduleManager.vendorConsumables.tips.uncheck'));
              flag = true;
              return;
            }
          }
        });
        if (flag) {
          return;
        } */
        this.appraiseData.progressId = this.$route.query.progressId;
        this.appraiseData.projectVendorId = this.$route.query.queryId;
        for (let i = 0; i < this.appraiseItem.length; i++) {
          this.appraiseItem[i].appraiseItemSeq = i;
        }
        const data = {
          vendorConsumableAppraise: this.appraiseData,
          list: this.appraiseItem
        };
        if (!data.vendorConsumableAppraise.proposal) {
          this.$message.error(this.$t('scheduleManager.vendorConsumables.noSelectAdvice')); // 未选择判定建议noSelectAdvice
          return
        }
        saveConsumableAppraise(data).then(res => {
          if (res.status === 200) {
            this.$message.success(this.$t('scheduleManager.vendorConsumables.tips.success'));
            const str = '/progressManager/worksDetails'
            this.$store.getters.pageState[str] = {}
            this.$router.push({
              path: '/progressManager/worksDetails',
              query: { progressId: this.$route.query.progressId }
            });
          } else {
            console.log(res.msg);
          }
        });
      },
      listenProjectItemScore(newValue) {
        if (newValue.length > 4) {
          let sum = 0;
          for (let i = 0; i < newValue.length - 3; i++) {
            if (
              newValue[i].appraiseItemScore === '' ||
              newValue[i].appraiseItemScore === -1
            ) {
              sum += 0;
            } else {
              sum += newValue[i].appraiseItemScore ? Number(newValue[i].appraiseItemScore) : 0;
            }
          }
          this.appraiseData.totalScore = sum;
        }
        if (this.appraiseData.totalScore < 23) {
          this.checkList = 'checkListC';
        } else if (
          this.appraiseData.totalScore < 47 &&
          this.appraiseData.totalScore >= 23
        ) {
          this.checkList = 'checkListB';
        } else if (this.appraiseData.totalScore >= 47) {
          this.checkList = 'checkListA';
        }
      },
      listenPurchaseItemScore(newValue) {
        if (newValue.length > 7) {
          let sum = 0;
          for (let i = 7; i < newValue.length; i++) {
            if (
              newValue[i].appraiseItemScore === '' ||
              newValue[i].appraiseItemScore === -1
            ) {
              sum += 0;
            } else {
              sum += newValue[i].appraiseItemScore ? Number(newValue[i].appraiseItemScore) : 0;
            }
          }
          this.appraiseData.purchaseTotalScore = sum;
        }
        if (this.appraiseData.purchaseTotalScore < 9) {
          this.checkPurchaseList = 'checkListC';
        } else if (
          this.appraiseData.purchaseTotalScore < 21 &&
          this.appraiseData.purchaseTotalScore >= 9
        ) {
          this.checkPurchaseList = 'checkListB';
        } else if (this.appraiseData.purchaseTotalScore >= 21) {
          this.checkPurchaseList = 'checkListA';
        }
      }
    },
    watch: {
      appraiseItem: {
        handler(newValue) {
          this.appraiseData.totalScore = 0;
          this.appraiseData.purchaseTotalScore = 0;
          this.checkList = '';
          this.checkPurchaseList = '';
          this.checkAllList = '';
          this.listenProjectItemScore(newValue)
          this.listenPurchaseItemScore(newValue)
          const allScore = this.appraiseData.totalScore + this.appraiseData.purchaseTotalScore
          if (allScore < 34) {
            this.checkAllList = 'checkListC';
          } else if (
            allScore < 68 &&
            allScore >= 34
          ) {
            this.checkAllList = 'checkListB';
          } else if (allScore >= 68) {
            this.checkAllList = 'checkListA';
          }
        },
        deep: true
      }
    }
  };
</script>
<style scoped lang="scss">
  .vendorConsumables {
    margin: 24px 0;
    padding: 5px 0;
    background-color: #fff;
    .title {
      width: 80%;
      margin: 0 auto;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      color: #212121;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #d9d9d9;
    }

    .yt-box-flex {
      margin: 26px auto;
      width: 96%;
      .center {
        text-align: center;
      }
      .flex-grid {
        width: 100%;
        display: grid;
        grid-template-columns: 140px 230px 120px 140px 120px 140px 120px auto;
        grid-template-rows: 40px 40px auto;
        grid-auto-flow: row;
        border: 1px solid #d9d9d9;
        border-width: 1px 1px 0px 0px;
      }
      .colspan-1-8 {
        grid-column: 1 / span 8;
      }
      .colspan-1-5 {
        grid-column: 1 / span 5;
      }
      .head-colspan-2-4 {
        grid-column: 2 / span 4;
      }
      .head-colspan-2-5 {
        grid-column: 2 / span 5;
      }
      .colspan-2-2 {
        grid-column: 2 / span 1;
        justify-content:start;
      }
      .colspan-1-1 {
        grid-column: 1 / span 1;
        justify-content:start;
      }
      .colspan-2-3 {
        grid-column: 2 / span 3;
      }
      .colspan-3-5 {
        grid-column: 3 / span 5;
      }
      .colspan-4-2 {
        grid-column: 4 / span 2;
      }
      .colspan-5-4 {
        grid-column: 5 / span 4;
      }
      .colspan-6-3 {
        grid-column: 6 / span 3;
      }
      .colspan-5-2 {
        grid-column: 5 / span 2;
      }
      .colspan-5-1 {
        grid-column: 5 / span 1;
      }
      .colspan-7-2 {
        grid-column: 7 / span 2;
      }
      .colspan-7-1 {
        grid-column: 7 / span 1;
      }
      .colspan-9-1 {
        grid-column: 9 / span 1;
      }
      .colspan-2-7 {
        grid-column: 2 / span 7;
      }
      .coldiv-5-9 {
        grid-row-start: 5;
        grid-row-end: span 9;
      }
      .coldiv-15-4 {
        grid-row-start: 15;
        grid-row-end: span 4;
      }
      .flex-col {
        padding: 12px 5px;
        border: 1px solid #d9d9d9;
        border-width: 0 0 1px 1px;
        white-space: normal;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .bgeee {
        background-color: #eee;
        text-align: center;
      }
      .flex-bg {
        background-color: #f1f4f3;
        text-align: center;
        font-weight: bold;
        white-space: normal;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 20px;
      }
    }
    .tl{
      justify-content: left !important;
    }
  }
</style>
